<#include "./template.ftl">

<#macro head>
    <title>百科-Morketing</title>
    <link rel="stylesheet" href="${base}/client/css/baike.css">
</#macro>
<#macro content>
        <div id="contents">
            <div class="baike-bar">
                 <h2>行业百科</h2>
            </div>
            <div class="main wrap clearfix baike-wrap">
                <div class="main-left f-r clearfix">
                    <div class="news-item show">
                    <#if bakes??>
                        <#list bakes as bake>
                        <div class="li-item">
                            <div class="f-l l">
                                <a href="${base}/baike/${bake.id}" style="display: inline-block;width: inherit;height: inherit">
                                    <div style="height:100%;width:160%;margin-left: -30%;text-align: center">
                                        <img style="height:100%;width:auto"  src="${base}/system/getImg?imgId=${bake.imgUrl}&w=224&h=168" alt="${bake.title}">
                                    </div>
                                </a>
                            </div>
                            <div class="cell">
                                <h2><a href="${base}/baike/${bake.id}">${bake.title}</a></h2>
                                <p>${bake.content!""}
                                </p>
                                <div class="tips">
                                    <div class="from">
                                        <span class="time">来自: ${bake.source}
                                            <#--|  发布日期：${bake.createTimeStr}-->
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </#list>
                    </#if>
                    </div>
                    <div class="index-page" style="display: block;margin-bottom:20px;">
                        <div class="mod-page">
                        ${pages!''}
                        </div>
                    </div>
                </div>
                <div class="main-right f-l clearfix">
                    <dl class="baike-subnav">
                        <dt>百科导航</dt>
                        <#if cats??>
                            <#list cats as cat>
                            <dd <#if activityCat??><#if cat.id == activityCat>class="active"</#if></#if> ><a href="${base}/baike/cat/${cat.id}">${cat.name}</a></dd>
                            </#list>
                        </#if>
                    </dl>
                </div>
            </div>   
        </div>
</#macro>
<#macro js>

<script>
    $(function(){
        var obj = $(".baike-subnav");
                            var offsetT = obj.offset().top;
                            var offsetL= obj.offset().left;
                            var objH=obj.height();

                            var leftH=$('.main-left').height();
                            var leftT=$('.main-left').offset().top;

                            var mixT=leftH-objH+leftT-64;
                            if($(window).width()>700){
                                $(document).on('scroll',function(){
                                    var scrollT=$(document).scrollTop();
                                    if(scrollT > offsetT-64 && scrollT < mixT ){
                                        obj.css({
                                            position:'fixed',
                                            top:'64px',
                                            left:offsetL,
                                            right:'auto',
                                            bottom:'auto'
                                        })
                                    }else if(scrollT > mixT){
                                        obj.css({
                                            position:'absolute',
                                            left:0,
                                            top:'auto',
                                            right:'auto',
                                            bottom:0
                                        })

                                    }else{
                                        obj.css({
                                            position:'static'
                                        })
                                    }

                                })
                            }
    })
</script>
</#macro>
